<template>
  <div>
    <div v-if="status ==='select'" class="upload-btn-wrapper selectFile" @click="selectFile">
      <input type="file" style="display:none" id="file" />
      <i class="el-icon-plus"></i>
    </div>
    <div v-if=" status === 'progress'" class="upload-btn-wrapper progress">
      <!-- <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt /> -->
      <img :src="imgUrl" alt />
      <div class="progress-bar">
        <el-progress
          :text-inside="true"
          :stroke-width="20"
          :percentage="percentage"
          :format="format"
        ></el-progress>
        <p>文件上传中...</p>
        <p @click="cancelUpload" class="btn_cancel">取消</p>
      </div>
    </div>
    <div v-if="status ==='result'" class="upload-btn-wrapper result">
      <img :src="imgUrl" alt />
      <span class="closeBtn" @click="cancelUpload"></span>
      <!-- <img src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png" alt /> -->
    </div>
  </div>
</template>


<script>
import axios from "axios";
export default {
  data() {
    return {
      status: "select", //result,progress//三种状态
      percentage: 0, //进度条百分比
      imgUrl: "" //上传成功后的图片地址
    };
  },
  methods: {
    format(percentage) {
      return percentage === 100 ? "满" : `${percentage}%`;
    },
    cancelUpload() {
      this.status = "select";
    },
    selectFile() {
      document.querySelector("#file").value = "";
      let file = document.getElementById("file");
      file.click();
      file.onchange = e => {
        let files = e.target.files;
        if (files.length == 0) {
          return;
        }
        if (files.length > 0) {
          this.status = "progress";
          let file = files[0];
          let reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = e => {
            let base64 = e.target.result;
            this.imgUrl = base64;
          };
          this.uploadSuccess(file);
        }
      };
    },
    //进度条变化的值
    progressChange(val) {
      console.log(val);
      this.percentage = val;
      if (val === 100) {
        this.status = "result";
      }
    },
    //上传成功后的回调
    uploadSuccess(val) {
      console.log(val);
      let token = "586942a4fdef4807b5d5672bbc5d3487";
      let formdata = new FormData();
      formdata.append("file", val);
      formdata.append("module", "Identification");
      console.log(formdata);
      axios
        .post(
          "https://sqzbx-test.etib.cn/newzbx/web/ucenter-web-api/file/upload/public",
          formdata,
          {
            headers: {
              "Content-Type": "multipart/form-data",
              Token: token
            },
            onUploadProgress: progressEvent => {
              this.progressChange(
                Math.round((progressEvent.loaded * 100) / progressEvent.total)
              );
            }
          }
        )
        .then(res => {
          console.log(res);
        }).catch(err => {
            console.log(err);
        })
    }
  }
};
</script>


<style lang="scss" scoped>
.upload-btn-wrapper {
  user-select: none;
  width: 200px;
  height: 200px;
  border: 1px solid #ccc;
  box-sizing: border-box;
  box-shadow: 0 0 10px #ccc;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 15px;
}
.selectFile {
  font-size: 30px;
  color: #ccc;
}
.progress {
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }
  &::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #3c4e66;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.5;
    border-radius: 5px;
  }
  .progress-bar {
    transform: translate(0, 50%);
    width: 90%;
    position: absolute;
    p {
      text-align: center;
      padding: 10px 0 0 0;
      color: #ccc;
    }
    .btn_cancel {
      padding: 10px;
      text-align: center;
    }
    ::v-deep .el-progress-bar__outer {
      height: 12px !important;
    }
    ::v-deep .el-progress-bar__innerText {
      display: inline-block;
      vertical-align: unset;
      color: #fff !important;
      font-size: 12px;
    }
  }
}
.result {
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
  }
  .closeBtn {
    // content: "";
    display: block;
    width: 15px;
    height: 15px;
    background-color: #3c4e66;
    position: absolute;
    background-image: url("../assets/img/close.svg");
    background-size: 100%;
    top: 0;
    right: 0;
    opacity: 0.5;
    border-radius: 5px;
  }
}
</style>